@import '../../ui/base'
.view
  display flex
  flex-direction column
  align-items center
  padding-top 38px

.line
  display flex
  justify-content space-around
  margin-top 60px
  width 100%

.two
  margin-top 200px

.point
  position relative
  > .p
    width 20px
    height 20px
    border-radius 50%
    background-color #DFE7EE
    position relative
    z-index 4
  > .clickable
    cursor pointer
    background-color #fff

.parent
.main
  > .p
    box-shadow 0 0 5px #7FC4FD

.is-root
  > .p
    pointer-events none
    opacity 0

.current
  .p-card
    > div
      bottom 21px
    &::before
      margin-left -11px
      bottom 16px
    &::after
      margin-left -9px
      bottom 17px
  > .p
    border 3px solid #FF8383
    position relative
    &::before
      background-color #fff
      width 26px
      height 26px
      border-radius 50%
      left -6px
      top -6px
      content ''
      position absolute
      border 3px solid #FF8383
      box-shadow 0 0 5px #FFB0B0

.p-line
  transform-origin 0 100%
  left 10px
  top 10px
  position absolute
  height 1px
  background-color #D2DAE0
  z-index 0

.p-card
  position absolute
  left -124px
  bottom 100%
  margin-bottom -21px
  @extends $slide-in-down
  > div
    bottom 29px
    box-shadow 0 0 10px 0 #90C4EF
  &::before
    border-color #c2c9d5 transparent transparent transparent
    border-width 7px 8px 0px 8px
    position absolute
    content ''
    bottom 24px
    left 50%
    margin-left -8px
    border-style solid
    z-index 3
    width 16px
    height 7px
  &::after
    border-color #fff transparent transparent transparent
    border-width 5px 6px 0px 6px
    position absolute
    content ''
    bottom 25px
    left 50%
    margin-left -6px
    border-style solid
    z-index 3
    width 12px
    height 5px

.root-card
  @extends $fade-in
  color #555
  position absolute
  background-color #dfe7ee
  width 500px
  height 60px
  bottom 0
  margin-left -240px
  padding 15px
  z-index 1
  display flex
  align-items center
  justify-content center
  &:hover
    opacity 1
    text-decoration underline

.parent
.main
  .root-card
    background-color #fff
    box-shadow 0 0 5px #7fc4fd

.current
  .root-card
    border 3px solid #6abbff
